<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>淘淘游-首页</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<style>
			ul {
				font-size: 14px;
				color: #8f8f94;
			}
			
			.mui-btn {
				padding: 10px;
			}
			
			.mui-off-canvas-left {
				height: 100%;
				background: #fff url(images/aside-bg2.png)no-repeat center bottom;
				background-size: contain;
			}
			
			#mui-left-menu .mui-table-view-cell {
				padding: 10px 15px;
			}
			
			#mui-left-menu .mui-table-view-cell span {
				vertical-align: middle;
				color: #fff;
				background-color: #00B281;
				border-radius: 50%;
				padding: 5px;
			}
			
			#mui-left-menu .mui-table-view-cell a {
				font-size: 18px;
				color: #000000;
			}
			
			#mui-left-menu .mui-table-view-cell:after {
				background-color: #fff;
			}
			
			#mui-left-menu {
				background-color: transparent;
			}
			
			#mui-left-menu:after {
				background-color: transparent;
			}
			
			#mui-left-menu:before {
				background-color: transparent;
			}
			
			.mui-user-info {
				background-color: #fff;
				padding: 10px 15px;
			}
			/*.mui-user-info p{
				color: #000000;
				padding-top: 10px;
			}*/
			
			.mui-word,
			.mui-logo {
				padding: 10px 15px;
				background: #00B281;
				color: #fff;
			}
			
			.mui-word {
				text-align: center;
			}
			
			.mui-word p,
			.mui-logo p {
				color: #fff;
				margin: 0;
			}
			
			.mui-user-info .mui-user-photo {
				width: 60px;
				height: auto;
				border-radius: 50%;
				vertical-align: middle;
			}
			
			#show-menu {
				color: #00B281;
			}
			
			footer {
				position: absolute;
				bottom: 0px;
			}
			
			.newMenu {
				text-align: center;
			}
			
			.newMenu a {
				color: #333333;
				display: block;
				line-height: 40px;
			}
			
			.newMenu .mui-icon {
				color: #00B281;
				/*font-size:30px;
				padding: 0px;
				vertical-align: middle;*/
			}
			
			iframe {
				width: 100%;
				height: 700px;
				margin: 0;
			}
		</style>
	</head>

	<body>
		<!-- 侧滑导航根容器 -->
		<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
			<!-- 菜单容器 -->
			<aside class="mui-off-canvas-left">
				<div class="mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 菜单具体展示内容 -->
						<div class="mui-logo">
							<h3 class="mui-name">淘淘游</h3>
							<p>淘游淘乐淘天下</p>
						</div>

						<div class="mui-user-info mui-content">
							<img class="mui-user-photo" src="images/girl/girl-18.png" />
							<span>陈景芝</span>
						</div>

						<ul id="mui-left-menu" class="mui-table-view">
							<li id="info" class="mui-table-view-cell"><a href="#"><span class="mui-icon mui-icon-person"></span> 信息</a></li>
							<li id="journey" class="mui-table-view-cell"><a href="#"><span class="mui-icon mui-icon-compose"></span> 游记</a></li>
							<li id="menu" class="mui-table-view-cell"><a href="#"><span class="mui-icon mui-icon-map"></span> 踩单</a></li>
							<li id="city" class="mui-table-view-cell"><a href="#"><span class="mui-icon mui-icon-loop"></span> 换城</a></li>
							<li id='setting' class="mui-table-view-cell"><a href="#"><span class="mui-icon mui-icon-settings"></span> 设置</a></li>
						</ul>
					</div>
				</div>
			</aside>
			<!-- 主页面容器 -->
			<div class="mui-inner-wrap">
				<!-- 主页面标题 -->
				<header class="mui-bar mui-bar-nav">
					<a id="show-menu" class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"></a>
					<h1 class="mui-title">淘淘游</h1>
				</header>
				<div class="mui-content mui-scroll-wrapper">
					<div class="mui-scroll">
						<!-- 主界面具体展示内容 -->
						<div class="mui-word">
							<h3 class="mui-name">下踩单 淘淘游</h3>
							<p>淘游满天下 欢乐溢苍穹</p>
						</div>
						<iframe src="baidumap.html" id="baidumap.html" name="baidumap.html" scrolling="no"></iframe>
					</div>
				</div>
				<!--遮罩-->
				<div id="backdrop" class="mui-off-canvas-backdrop"></div>
			</div>

			<footer class="mui-bar">
				<div class="newMenu">
					<a id="newMenu">
				    	开启淘宝
				    	<span class="mui-icon mui-icon-camera"></span>
				    </a>
				</div>
			</footer>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/app.js"></script>
		<script>
			(function($, doc) {
				mui.init();
				var settings = app.getSettings();
				var account = doc.getElementById('account');
				//------------------------------------------
				window.addEventListener('show', function() {
					var state = app.getState();
					account.innerText = state.account;
				}, false);
				$.plusReady(function() {
					var settingPage = $.preload({
						"id": 'setting',
						"url": 'setting.html'
					});
					//设置
					var settingButton = doc.getElementById('setting');
					//settingButton.style.display = settings.autoLogin ? 'block' : 'none';
					settingButton.addEventListener('tap', function(event) {
						$.openWindow({
							id: 'setting',
							show: {
								aniShow: 'pop-in'
							},
							styles: {
								popGesture: 'hide'
							},
							waiting: {
								autoShow: false
							}
						});
					});
					//-------------------
					$.oldBack = mui.back;
					var backButtonPress = 0;
					$.back = function(event) {
						backButtonPress++;
						if (backButtonPress > 1) {
							plus.runtime.quit();
						} else {
							plus.nativeUI.toast('再按一次退出应用');
						}
						setTimeout(function() {
							backButtonPress = 0;
						}, 1000);
						return false;
					};
				});
				var menuBtn = doc.getElementById('show-menu');
				menuBtn.addEventListener('tap', function() {
					mui('.mui-off-canvas-wrap').offCanvas().show();
				});
				var info = doc.getElementById('info');
				info.addEventListener("tap", function() {
					$.openWindow({
						url: "info.html",
						id: 'info',
						show: {
							aniShow: 'pop-in'
						},
						styles: {
							popGesture: 'hide'
						},
						waiting: {
							autoShow: false
						}
					});
				});
				var journey = doc.getElementById('journey');
				journey.addEventListener("tap", function() {
					$.openWindow({
						url: "journey.html",
						id: 'journey',
						show: {
							aniShow: 'pop-in'
						},
						styles: {
							popGesture: 'hide'
						},
						waiting: {
							autoShow: false
						}
					});
				});
				var menu = doc.getElementById('menu');
				menu.addEventListener("tap", function() {
					$.openWindow({
						url: "menu.html",
						id: 'menu',
						show: {
							aniShow: 'pop-in'
						},
						styles: {
							popGesture: 'hide'
						},
						waiting: {
							autoShow: false
						}
					});
				});
				var city = doc.getElementById('city');
				city.addEventListener("tap", function() {
					$.openWindow({
						url: "city.html",
						id: 'city',
						show: {
							aniShow: 'pop-in'
						},
						styles: {
							popGesture: 'hide'
						},
						waiting: {
							autoShow: false
						}
					});
				});
			}(mui, document));
		</script>
	</body>

</html>